<template>
    <el-container>

        <el-header v-if="changeRow.length>0">
            <el-button type="primary" @click="putNews">发布<i class="el-icon-s-promotion el-icon--right"></i></el-button>
        </el-header>

        <el-main>
            <el-table v-loading="tableLoding" :data="tableData.data" style="width: 100%"
                @selection-change="handleSelectionChange"  border>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        标题:{{props.row.digest}}
                    </template>
                </el-table-column>
                <el-table-column type="selection" width="100" :selectable="selectable">
                </el-table-column>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" sortable>
                </el-table-column>
                <el-table-column prop="thumbUrl" label="首页图片路径">
                    <template slot-scope="props">
                        <el-link :href="props.row.thumbUrl" target="_blank" type="primary">{{props.row.thumbUrl}}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="文章路径">
                    <template slot-scope="props">
                        <el-link :href="props.row.url" target="_blank" type="primary">{{props.row.url}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="show" label="是否发布" :formatter="showChangeData" sortable>
                </el-table-column>
            </el-table>
        </el-main>

        <el-footer>
            <div class="block">
                <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
                    @next-click="nextPage" :current-page="tableData.currentPage"
                    :page-sizes="[5, 10, 15, 20]" :page-size="tableData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>


</template>

<script>
    import {
        getWechatNews,
        addWechatNews
    } from "@/api/newsApi";


    export default {
        data() {
            return {
                tableData: { //表格data
                    data: [],
                    currentPage: 1,
                    pageSize: 5,
                    total: 0,
                },
                tableLoding: false, //表格加载
                changeRow: []
            }
        },
        created: function () {
            this.getWechatNews()
        },
        methods: {
            //数据控制
            getWechatNews() {
                this.tableLoding = true
                getWechatNews(this.tableData).then(response => {
                    this.tableData.data = response.data.data.items
                    this.tableData.total = response.data.data.total
                    this.tableLoding = false
                }).catch(error => {
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    })
                    this.tableLoding = false
                })
            },
            changePageSize(val) {
                this.tableData.pageSize = val
                this.getWechatNews()
            },
            changeCurrentPage(val) {
                this.tableData.currentPage = val
                this.getWechatNews()
            },
            prevPage(val) {
                this.tableData.currentPage = val
                this.getWechatNews()
            },
            nextPage(val) {
                this.tableData.currentPage = val
                this.getWechatNews()
            },
            showChangeData: function (row, column) {
                return row.show == '1' ? "已发布" :
                    row.show == '0' ? "未发布" :
                    "未知"
            },
            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            handleSelectionChange(val) {
                this.changeRow = val
            },
            selectable(row, index) {
                if (row.show == 1) {
                    return false
                } else {
                    return true
                }
            },
            putNews() {
                if (this.changeRow.length > 0) {
                    this.tableLoding = true
                    addWechatNews(this.changeRow).then(response => {
                        this.$message({
                            showClose: true,
                            message: "发布成功",
                            type: 'success'
                        })
                        this.getWechatNews()
                        this.tableLoding = false
                    }).catch(error => {
                        this.$message({
                            showClose: true,
                            message: error,
                            type: 'error'
                        })
                        this.tableLoding = false
                    })
                } else {
                    return;
                }
            }
        }
    }
</script>

<style>
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #70b3ff87 !important;
    }
</style>